<template>
  <div class="detail-data">
    <el-tabs v-model="activeName">
      <el-tab-pane label="设备历史状态" name="1">
        <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary" class="search-btn" @click="searchBtn">查询</el-button>
          <el-button type="danger" class="search-btn" @click="changeIsTable">异常数据</el-button>
          <el-button type="primary" class="search-btn" @click="bpCommit">血压测量</el-button>
          <el-button type="primary" class="search-btn" @click="bgCommit">血糖测量</el-button>
          <el-button type="primary" class="search-btn" @click="test">测试</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { dateFormat } from '@/utils'

export default {
  props: ['device'],
  data() {
    return {
      value: '',
      activeName: '1',
      startDate: '',
      endDate: '',
      deviceInfo: {
        deviceName: 'device1',
        currentBpUp: '',
        currentBpDown: '',
      },
      socket: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    searchBtn() {
      this.startDate = dateFormat(this.value[0], 'yyyy-MM-dd')
      this.endDate = dateFormat(this.value[1], 'yyyy-MM-dd')
      console.log(this.startDate, this.endDate)
      this.$emit('changeDate', this.startDate, this.endDate)
    },
    changeIsTable() {
      this.$bus.$emit('isTable', true)
    },
    bpCommit() {
      this.$http.post('/v1/deviceInfo/bpThreshold', this.deviceInfo).then(() => {
        this.$http.get('/v1/deviceInfo/list').then(res => {
          // 页面图表数据更新
          this.$bus.$emit('bpDeviceHistoryLog')
          this.$notify({
            title: '测量结果',
            message: '上压：' + res.data[0].currentBpUp + '    下压：' + res.data[0].currentBpDown,
            duration: 0,
            offset: 130,
          })
        })
      })
    },
    bgCommit() {
      this.$http.post('/v1/deviceInfo/bgThreshold', this.deviceInfo).then(() => {
        this.$http.get('/v1/deviceInfo/list').then(res => {
          // 页面图表数据更新
          this.$bus.$emit('bgDeviceHistoryLog')
          this.$notify({
            title: '测量结果',
            message: '血糖：' + res.data[0].currentBg,
            duration: 0,
            offset: 130,
          })
        })
      })
    },
    test() {
      this.send('test')
    },
    init() {
      // 实例化socket
      this.socket = new WebSocket('ws://localhost:9090/v1/websocket/1')
      // 监听socket连接
      this.socket.onopen = this.open
      // 监听socket错误信息
      this.socket.onerror = this.error
      // 监听socket消息
      this.socket.onmessage = this.getMessage
      this.socket.onclose = this.close
    },
    send(params) {
      this.socket.send(params)
    },
    open() {
      console.log('socket已连接')
    },
    error() {
      console.log('socket连接错误')
    },
    getMessage(msg) {
      console.log(msg.data)
    },
    close() {
      console.log('socket已关闭')
    },
  },
}
</script>

<style scoped>
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: start;
}
.label {
  line-height: 36px;
  margin-right: 16px;
}
.search-btn {
  margin: 0 15px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
